<template>
    <div class="app-container">
        <!--工具栏-->
        <div class="head-container">
            <!-- 搜索 -->
            <el-input v-model="query.blurry" clearable size="small" placeholder="充值订单号/账户名称/公司名称/银行卡号模糊搜索"
                      style="width: 340px;" class="filter-item" @keyup.enter.native="toQuery" />
            <el-select v-model="query.uid" clearable class="filter-item" style="width: 150px" 
                        placeholder="请选择用户名称" @change="toQuery" filterable>
                <el-option
                v-for="(item, index) in users"
                :key="item.username + index"
                :label="item.username"
                :value="item.uid"
                />
            </el-select>
            <el-select v-model="query.approvalStatus" clearable size="small" placeholder="审核状态" class="filter-item" style="width: 120px" @change="toQuery">
                <el-option v-for="item in dict.dict.approval_status" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
            <!-- 刷新 -->
            <el-button type="danger" class="filter-item" size="mini" icon="el-icon-refresh" @click="toQuery">刷新</el-button>
        </div>

        <!--表单组件-->
        <eForm ref="form" :is-add="isAdd" />

        <!--表格渲染-->
        <el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
            <el-table-column prop="orderNo" label="充值订单号" min-width="160px"/>
            <el-table-column prop="userName" label="用户名称" min-width="100px"/>
            <el-table-column label="转账信息" min-width="250px">
                <template slot-scope="scope">
                    <div>
                        <span>
                             转账类型：
                             <span v-if="scope.row.transferType==0"> 对私转账</span>
                             <span v-else>对公转账</span>
                        </span>
                        <br>
                        <span v-if="scope.row.transferType == 0 || scope.row.transferType == null">
                        账户名称：{{ scope.row.accountName }}<br>
                        </span>
                        <span v-if="scope.row.transferType == 1 || scope.row.transferType == null">
                        公司名称：{{ scope.row.corporationName }}<br>
                        </span>
                        银行卡号：{{ scope.row.bankCode }}<br>
                        开户行地址：{{ scope.row.bankAddress }}<br>
                        转账金额：{{ scope.row.amount }}<br>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="approvalStatus" label="审核状态">
                <template slot-scope="scope">
                    <div v-if="scope.row.approvalStatus==0">
                        审核中
                    </div>
                    <div v-else-if="scope.row.approvalStatus==1">
                        待转账
                    </div>
                    <div v-else-if="scope.row.approvalStatus==2">
                        已转账
                    </div>
                    <div v-else>
                        未通过
                    </div>
                </template>
            </el-table-column>
            <!--<el-table-column prop="approvalResult" label="审核结果"/>-->
            <el-table-column prop="mark" label="备注"/>
            <el-table-column prop="createTime" label="创建时间" min-width="80px">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="更新时间" min-width="80px">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.updateTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column v-if="checkPermission(['admin','userTransfer:edit','userTransfer:del'])" label="操作" width="100px" align="center">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.approvalStatus==0"
                        v-permission="['admin','userTransfer:edit']"
                        size="mini" type="primary" @click="edit1(scope.row)">
                        财务审核
                    </el-button>
                    <el-button v-else-if="scope.row.approvalStatus==1"
                        v-permission="['admin','userTransfer:edit']"
                        size="mini" type="danger" @click="edit2(scope.row)">
                        出纳审核
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页组件-->
        <el-pagination :total="total" :current-page="page + 1" style="margin-top: 8px;"
            layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange"/>
    </div>
</template>

<script>
import { getAllMemberUser } from '@/api/memberUser'
import initData from '@/mixins/crud'
import checkPermission from '@/utils/permission'
import eForm from './form'

export default {
  components: { eForm },
  mixins: [initData],
  // 设置数据字典
  dicts: ['approval_status'],
  data() {
    return {
      users: []
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  mounted:function(){ //在页面加载参数结束后执行某个函数
    this.$nextTick(function(){
        //调用需要执行的方法
        this.getMemberUser()
    })      
  },
  methods: {
    checkPermission,
    beforeInit() {
      this.url = 'api/userTransfer'
      const sort = 'id,desc'
      this.params = { page: this.page, size: this.size, sort: sort }
      const query = this.query
      const type = query.type
      const value = query.value
      if (type && value) { this.params[type] = value }
      return true
    },
    add() {
      this.isAdd = true
      this.$refs.form.dialog = true
    },
    edit1(data) {
      this.isAdd = false
      const _this = this.$refs.form
      _this.form = {
        id: data.id,
        uid: data.uid,
        userName: data.userName,
        transferType: data.transferType,
        accountName: data.accountName,
        corporationName: data.corporationName,
        bankCode: data.bankCode,
        bankAddress: data.bankAddress,
        amount: data.amount,
        mark: null,
        approvalStatus: data.approvalStatus,
        approvalResult: null
      }
      _this.dialog = true
    },
    edit2(data) {
      this.isAdd = false
      const _this = this.$refs.form
      _this.form = {
        id: data.id,
        uid: data.uid,
        userName: data.userName,
        transferType: data.transferType,
        accountName: data.accountName,
        corporationName: data.corporationName,
        bankCode: data.bankCode,
        bankAddress: data.bankAddress,
        amount: data.amount,
        mark: null,
        approvalStatus: data.approvalStatus,
        approvalResult: null
      }
      _this.dialog = true
    },
    getMemberUser() {
        getAllMemberUser().then(res => {
            this.users = res
        }).catch(() => { })
    }
  }
}

</script>

<style scoped>
    .table-img {
        display: inline-block;
        text-align: center;
        background: #ccc;
        color: #fff;
        white-space: nowrap;
        position: relative;
        overflow: hidden;
        vertical-align: middle;
        width: 32px;
        height: 32px;
        line-height: 32px;
    }

</style>
